import { Col, Form, Input, Radio, Row, message } from 'antd'
import MyModal from '../MyModal';
import { useEffect } from "react"
import { useRequest } from 'ahooks';
import { editFavoritesFolders } from '@/services/favorite';

export default ({ val, open, close, refresh }) => {
    const [form] = Form.useForm();
    const {run:edit} = useRequest(editFavoritesFolders,{
        manual:true,
        onSuccess:(res,[params])=>{
            message.success(params?.id ?'修改成功':'添加成功')
            refresh();
            close();
        }
    })
    useEffect(() => {
        form.setFieldsValue(val)
    }, [open])
    return <MyModal
        open={open}
        onOk={async() => {
         const res = await form.validateFields();
          edit({
            ...val,
            ...res,
          })
        }}
        close={close} title={val.id ? '编辑收藏夹' : '新建收藏夹'} width={520}>
        <Form layout='vertical' form={form}  requiredMark={false} >
            <Row gutter={16}>
                <Col span={24}>
                    <Form.Item
                        name="name"
                        label="名称"
                        rules={[{ required: true, message: '请输入名称' }]}
                    >
                        <Input showCount maxLength={20} placeholder="" />
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={16}>
                <Col span={24}>
                    <Form.Item
                        name="permission"
                        label="权限"
                        initialValue={1}
                    >
                        <Radio.Group>
                            <Radio value={0}>私有</Radio>
                            <Radio value={1}>共享</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
            </Row>
        </Form>
    </MyModal>
}